<template>
	<uni-popup ref="popup" type="bottom">
		<view class="pop">
			<view class="top">
				<text class="top-title">{{title}}</text>
				<text class="top-desc">共{{totalBox || 0}}箱
					总重{{totalCount || 0}}{{ dataList.length > 0 ? dataList[0].unit : "" }}</text>
				<icon class="close-btn" type="clear" size="26" @click="close" />
			</view>
			<scroll-view class="scroll-height" scroll-y="true">
				<view class="list">
					<view v-for="(data, index) in dataList" class="list-item">
						<text class="list-item-name" :class="{error: data.error}">{{ data.materialName }}</text>
						<view class="list-item-val">
							<view class="nowrap">
								<text class="val-title">批次</text><span class="font">：</span>
								<text class="val-content">{{ data.batchNo || "-" }}</text>
							</view>
							<view class="nowrap" v-if="data.boxNo">
								<text class="val-title">箱号</text><span class="font">：</span><text
									class="val-content">{{ data.boxNo }}</text>
							</view>
							<view class="nowrap" v-if="data.currentCount">
								<text class="val-title">箱数</text><span class="font">：</span><text
									class="val-content">{{ data.currentCount }}</text>
							</view>
							<view class="nowrap" v-if="data.materialSpec">
								<text class="val-title">规格</text><span class="font">：</span><text
									class="val-content">{{ data.materialSpec }}</text>
							</view>
							<view class="nowrap" v-if="data.locationNo">
								<text class="val-title">仓位</text><span class="font">：</span><text
									class="val-content">{{ data.locationNo }}</text>
							</view>
							<view class="nowrap">
								<text class="val-title">重量</text><span class="font">：</span><text
									class="val-content">{{ Number((data.sumCount || 0).toFixed(6)) }}{{ data.unit }}</text>
							</view>
							<view class="nowrap" v-if="type==='inventoryPlan' && data.type==='1'">
								<!-- 明盘 -->
								<text class="val-title">账面数</text><span class="font">：</span><text
									class="val-content">{{ Number((data.bookCount || 0).toFixed(6)) }}{{ data.unit }}</text>
							</view>
							<view class="nowrap" v-if="type==='inventoryPlan'">
								<text class="val-title">扫描状态</text><span class="font">：</span><text
									class="val-content">{{ data.status === 'yes' ? '是' : '否' }}</text>
							</view>
							<view class="nowrap" v-if="data.traceBack && data.traceBack.length">
								<text class="val-title pt">追溯码</text><span class="font">：</span>
								<view class="val-traceBack">
									<view class="val-traceBack-item" v-for="(item, i) in data.traceBack" :key="item.id">
										<view class="value">
											{{handleTraceBack(item)}}
										</view>
										<i class="iconfont icon-shanchu" @click="deleteTraceBack(data, i)"></i>
									</view>
								</view>
							</view>
						</view>
						<template v-if="!hiddenDelete">
							<icon v-if="type==='inventoryPlan'&&data.status === 'yes'" class="item-delete-btn"
								type="cancel" size="26" @click="deleteItem(data, index)" />
							<icon v-if="type!=='inventoryPlan'" class="item-delete-btn" type="cancel" size="26"
								@click="deleteItem(data, index)" />
						</template>
					</view>
				</view>
			</scroll-view>
		</view>
	</uni-popup>

</template>

<script>
	export default {
		emits: ['delete', 'deleteTraceBack'],
		props: {
			hiddenDelete: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				type: null,
				title: '',
				dataList: []
			}
		},
		computed: {
			totalCount() {
				return this.dataList.reduce((a, b) => a + parseInt(b.sumCount), 0)
			},
			totalBox() {
				return this.dataList.reduce((a, b) => a + parseInt(b.currentCount), 0)
			}
		},
		methods: {

			/**
			 * @param {Object} e
			 */
			handleTraceBack(e) {
				let res = e
				let index = e.indexOf("=")
				if (index > -1) {
					res = e.substring(index + 1)
				}
				return res
			},

			/**
			 * 开启
			 */
			open(data) {
				let {
					title,
					dataList = [],
					type = null,
					errorList = []
				} = data;
				if (errorList && errorList.length > 0) {
					errorList.forEach((item) => {
						let index = dataList.findIndex((element) => {
							return element.boxNo === item
						})
						if (index > -1) {
							dataList[index].error = true
						}
					})
				}
				this.title = title;
				this.dataList = dataList;
				this.type = type;
				this.$refs.popup.open('right')
			},

			/**
			 * 关闭画面
			 */
			close() {
				this.$refs.popup.close()
			},

			/**
			 * 删除物料
			 */
			deleteItem(data, index) {
				let self = this
				uni.showModal({
					title: "提示",
					content: "确认删除吗？",
					success(res) {
						if (res.confirm) {
							self.$emit('delete', {
								material: data,
								success: () => {
									self.dataList.splice(index, 1);
									self.$forceUpdate();
									if (!self.dataList.length) {
										self.close();
									}
								},
								index: index
							})
						}
					}
				})
			},

			/**
			 * 删除追溯码
			 * @param {Object} e
			 * @param {Object} i
			 */
			deleteTraceBack(e, i) {
				let self = this
				uni.showModal({
					title: "提示",
					content: "是否删除该追溯码？",
					success(res) {
						if (res.confirm) {
							self.$emit('deleteTraceBack', {
								boxNo: e.boxNo,
								traceBack: e.traceBack[i],
								success: () => {
									e.traceBack.splice(i, 1)
								},
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop {
		display: flex;
		flex-direction: column;
		width: 600rpx;
		padding-top: 6px;
		background-color: white;
		/* #ifdef APP-PLUS */
		height: 100vh;
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px);
		/* #endif */
	}

	.top {
		height: 80px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #F1F1F1;
		padding-left: 10px;
		padding-bottom: 10px;
		position: relative;
	}

	.top-title {
		display: flex;
		flex-direction: column;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.top-desc {
		display: flex;
		flex-direction: column;
		color: #999;
		font-size: 14px;
	}

	.close-btn {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 20px;
	}
	
	.scroll-height {
		/* #ifdef APP-PLUS */
		height: calc(100vh - 80px);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px - 80px);
		/* #endif */
	}

	.list {
		padding: 0 10px 10px;
		box-sizing: border-box;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		position: relative;
		border-bottom: 1px solid #F1F1F1;
		padding: 10px;
	}

	.item-delete-btn {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.list-item-name {
		width: calc(100%);
		display: flex;
		flex-direction: column;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.list-item-val {
		display: flex;
		flex-direction: column;
	}

	.val-title {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		color: $font-hc;
		min-width: 100rpx;
		text-align-last: justify;

		&.pt {
			padding-top: 8rpx;
		}
	}

	.font {
		color: $font-hc;
	}

	.val-traceBack {}

	.val-traceBack-item {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		margin: 0 0 10rpx 0;
		padding: 8rpx 10rpx;
		border-radius: 10rpx;
	}

	.val-traceBack-item .value {
		margin-right: 20rpx;
	}

	.val-content {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		margin-right: 12px;
	}

	.nowrap {
		display: flex;
		// align-items: center;
		flex-direction: column;
		font-size: 14px;
		margin-bottom: 4px;
		flex-direction: row;
	}

	.error {
		display: flex;
		flex-direction: column;
		color: red
	}
</style>
